<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>漂漂</title>
  </head>
  <style>
    *{
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }
    .flex-center-center{
      display: flex;
      align-items: center;
      justify-items: center;
    }
    .animation_box{
      width: 350px;
      height: 650px;
      pointer-events: none;
    }
    canvas{
      width: 100%;
      height: 100%;
      transform: none !important;
    }
    img{
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  </style>
  <body>
    <div class="animation_box flex-center-center" id="animation_canvas"></div>
  </body>
  <script src="./qwebchannel.js"></script>
  <script src="./svga.min.js"></script>
  <script src="./giftAnimation.js"></script>
  <script>
    var animation_obj = null
    var animationList = [
      {webpUrl: 'https://yoyo-live-test-1305507516.cos.ap-guangzhou.myqcloud.com/cms/gift/1653306264222_page1.svga',},
      {webpUrl:"https://yoyo-live-test-1305507516.cos.ap-guangzhou.myqcloud.com/cms/gift/1643180186162_xingkongzhichuang8181788.webp", webpMillis: 5000},
      {webpUrl: 'https://yoyo-live-test-1305507516.cos.ap-guangzhou.myqcloud.com/cms/gift/1653301761590_paopaoji.svga',},
      {carAnimationUrl:"https://yoyo-live-test-1305507516.cos.ap-guangzhou.myqcloud.com/cms/gift/1642134249997_tianehuzhilian_6.mp4"},
    ]
    function init(){
      if(!animation_obj){
        animation_obj = new GiftAnimation({
          list: animationList,
          elem: document.getElementById('animation_canvas'),
          elemId: "#animation_canvas"
        })
      }else{
        animation_obj.changeList(animationList)
      }
    }
    init()
  </script>
</html>
